<template>

  
  <div class="login-container">
    <div class="login-card">
      <div class="login-icon">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M13.8 12H3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      
      <h1>欢迎使用云HIS系统</h1>
      <p class="subtitle">方便快捷的医疗云HIS管理工具</p>

      <form @submit.prevent="handleSubmit">
        <div class="input-group">
          <input 
            type="email" 
            v-model="email"
            placeholder="系统账号"
            required
          >
          <span class="input-icon">✉️</span>
        </div>

        <div class="input-group">
          <input 
            :type="showPassword ? 'text' : 'password'"
            v-model="password"
            placeholder="系统密码"
            required
          >
          <span 
            class="input-icon clickable" 
            @click="togglePassword"
          >👁️</span>
        </div>

        <!-- <div class="forgot-password">
          <a href="#" @click.prevent="handleForgotPassword">Forgot password?</a>
        </div> -->

        <button type="submit" class="submit-btn">登录系统</button>


      </form>
    </div>
    <div class="footer">
            <span>Copyright © 2006-2025 <a href="#">黑龙江若康科技有限公司</a></span>
        </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const email = ref('')
const password = ref('')
const showPassword = ref(false)

const handleSubmit = () => {
  console.log('Form submitted:', { email: email.value, password: password.value })
}

const togglePassword = () => {
  showPassword.value = !showPassword.value
}

// const handleForgotPassword = () => {
//   console.log('Forgot password clicked')
// }


</script>

<style scoped lang="less">
.footer{
position: fixed;
width: 100%;
text-align: center;
height: 40px;
line-height: 40px;
bottom: 0;
span{
    font-size: 14px;
    a{
        color: #ffffff;
        text-decoration: none;
    }
}
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  /* background: linear-gradient(135deg, #e6f3ff 0%, #f5f9ff 100%); */
  // padding: 20px;
  background-image: url('../assets/bg2.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.login-card {
  background: white;
  padding: 40px;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.login-icon {
  background: #f8f9fa;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: #1a1a1a;
}

h1 {
  font-size: 24px;
  color: #1a1a1a;
  margin-bottom: 12px;
  font-weight: 600;
}

.subtitle {
  color: #6c757d;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 32px;
}

.input-group {
  position: relative;
  margin-bottom: 16px;
}

input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  font-size: 14px;
  background: #f8f9fa;
  transition: all 0.3s ease;
}

input:focus {
  outline: none;
  border-color: #4dabf7;
  background: white;
}

.input-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
}

.input-icon.clickable {
  cursor: pointer;
}

.forgot-password {
  text-align: right;
  margin-bottom: 24px;
}

.forgot-password a {
  color: #4dabf7;
  text-decoration: none;
  font-size: 14px;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #4dabf7;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.submit-btn:hover {
  background: #2e75b0;
}

.divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
}

.divider::before,
.divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: #e9ecef;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.divider span {
  background: white;
  padding: 0 10px;
  color: #6c757d;
  font-size: 14px;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.social-btn {
  width: 48px;
  height: 48px;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-btn:hover {
  background: #f8f9fa;
}

.social-btn img {
  width: 24px;
  height: 24px;
}
</style>
